<template>
	<div class="movie-list">
		<!-- <p>这个是MovieList组件—— {{title}}</p> -->
		<div class="movie-list-head">
			<h4>{{ title }}</h4>
			<router-link :to="'#'" append class="more">更多</router-link>
		</div>
		<ul v-if="source === '豆瓣'">
			
	        <router-link :to="'subject/' + item.id" tag="li" append v-for="item in items" class="movie-list-item"  >
	          	<figure class="movie-list-item-img">
	          		<img v-if="item.images" :src="item.images.large" alt="">
	          	</figure>

	          	<div class="movie-list-item-info">
	          		<div class="movie-list-item-head">
	          			<span class="title">{{item.title}}</span>
		          		<span class="average">{{item.rating.average}}</span>
	          		</div>
	          		<div class="movie-list-item-body">
	          			<p>最近研究sass，用的是vs+vs插件，实在是太大了虽然电脑跑的动之前一直用大了...</p>
	          		</div>
	          	</div>
	        </router-link>
	    </ul>

	    <ul v-if="source === '猫眼'">
	        <router-link :to="'subject/' + item.id" tag="li" append v-for="item in items" class="movie-list-item"  >
	          	<figure class="movie-list-item-img">
	          		<img v-if="item.img" :src="item.img" alt="">
	          	</figure>

	          	<div class="movie-list-item-info">
	          		<div class="movie-list-item-head">
	          			<span class="title">{{item.nm}}</span>
		          		<span class="average">{{item.sc}}</span>
	          		</div>
	          		<div class="movie-list-item-body">
	          			<p>{{item.scm}}</p>
	          			<p>{{item.star}}</p>
	          		</div>
	          	</div>
	        </router-link>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "movie-list",
		props: {
			source: {
				type: String,
				default: '豆瓣'
			},
			title: {
				type: String,
				required: true
			},
			items: {
				type: Array,
				required: true
			}
		},
		data () {
			return { 

			}
		}
	}
</script>

<style lang="sass" scoped>
	$main-color: #596990;
	.movie-list {
		.movie-list-head {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 15px 15px 8px 15px;
			margin-bottom: 8px;
			border-bottom: 1px solid rgba(89, 105, 144, .16);

			h4 {
				margin: 0;
				font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
				font-size: 16px;
				font-weight: bold;
				color: $main-color;
			}
			.more {
				font-size: 14px;
				color: $main-color;
				text-decoration: none;
			}
		}

		ul {
			.movie-list-item {
				display: flex;
				padding: 7px 15px 8px 15px;

				.movie-list-item-img {
					display: inline-block;
					width: 80px;height: 115px;
					border-radius: 5px;
					border: 1px solid #ccc;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}


				}

				.movie-list-item-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 15px;
					
					.movie-list-item-head {
						display: flex;
						justify-content: space-between;
						
						.title {
							font-size: 16px;
							line-height: 23px;
							color: #333;
						}
						.average {
							font-size: 12px;
							line-height: 23px;
							color: #ccc;
						}
					}
					.movie-list-item-body {
						margin-top: 12px;
						p {
							font-size: 12px;
							color: #999;
							margin-bottom: 2px;
						}
					}
				}
			}
		}
	}
</style>